<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				background-color: pink;
				border: 10px red solid;
				padding: 20px;
				overflow: auto;
			}
		</style>
	</head>
	<body>
		<div>
			内容内容内容内容内容内容内容内容内容内容
			内容内容内容内容内容内容内容内容内容内容
			内容内容内容内容内容内容内容内容内容内容
			内容内容内容内容内容内容内容内容内容内容
			内容内容内容内容内容内容内容内容内容内容
			内容内容内容内容内容内容内容内容内容内容
			内容内容内容内容内容内容内容内容内容内容
			内容内容内容内容内容内容内容内容内容内容
			内容内容内容内容内容内容内容内容内容内容
			内容内容内容内容内容内容内容内容内容内容
			内容内容内容内容内容内容内容内容内容内容
			内容内容内容内容内容内容内容内容内容内容
			内容内容内容内容内容内容内容内容内容内容
			内容内容内容内容内容内容内容内容内容内容
			内容内容内容内容内容内容内容内容内容内容
			内容内容内容内容内容内容内容内容内容内容
			内容内容内容内容内容内容内容内容内容内容
		</div>
		<script type="text/javascript">
			//scroll系列
			var div = document.querySelector('div');
			console.log(div.scrollHeight); //返回自身实际高度,不包含边框,返回数值,不带单位
			console.log(div.clientHeight); //返回div的高度,不含边框,不带单位

			//scroll滚动事件当滚动条 发生变化会触发
			div.addEventListener('scroll', function() {
				console.log(div.scrollTop);
			})
		</script>
	</body>
</html>
